<apes-header *ngIf="!hideBtnBar">
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>

<div class="apes-form-container" [ngClass]="{'showBtnBar': !hideBtnBar}">
  <!--<div>-->
  <div *ngIf="isDownloading" class="download-loading">
    <div class="download-loading-progress">
      <div>数据下载中请稍后
        <apes-spin style="display: inline-block" apesSimple></apes-spin>
      </div>
      <apes-progress
        [apesPercent]='percent'
        [apesStrokeColor]="{ '0%': '#108ee9', '100%': '#87d068' }"
        apesStatus="active"
      ></apes-progress>
    </div>
  </div>
  <apes-container [apesPrefixCls]="'apes-container'" [relevancy]="relevancyMetadata">
    <div apes-form [formGroup]="form">

      <div apes-row [apesGutter]="8" style="padding:8px 8px 0px;margin: 0px;">
        <div apes-col [apesMd]="24" style="padding: 0px">
          <apes-card [apesTitle]="'查询条件'" class="query-search query-search-title">
            <div>
              <div apes-form-item apes-row class="apes-item" style="padding:8px 8px 20px">
                <formly-form [model]="model" [fields]="showConditionField" [options]="options"
                             [form]="form"></formly-form>
              </div>
              <div *ngIf="showMoreBtn" class="apes-query-showMore">
                <div *ngIf="showData" (click)="action_showMore()" class="apes-query-showMore-btn">
                  <i apes-icon [apesType]="'double-right'" [apesRotate]="90"></i>
                </div>
                <div *ngIf="!showData" (click)="action_showMore()" class="apes-query-showMore-btn">
                  <i apes-icon [apesType]="'double-left'" [apesRotate]="90"></i>
                </div>
              </div>
            </div>
          </apes-card>
          <apes-card [apesTitle]="'查询结果'" class="query-search-title">


            <!-- 表格 -->
            <ng-container *ngIf="searchShowType == 'grid'">
              <div class="query-grid" [ngClass]="{'pages': rowModelType=='clientSide'}">
                <div class="query-btnList" *ngIf="buttonList.length != 0 || btnRemarks != ''">
                  <div *ngIf="buttonList.length != 0">
                    <ng-container *ngFor="let btn of buttonList">
                      <button apes-button [apesType]="showBtnType(btn)" [apesSize]="'default'"
                              (click)="clickBtn(btn)">{{btn.name}}</button>
                    </ng-container>
                  </div>
                  <div *ngIf="btnRemarks != ''" style="color: red;padding: 3px 10px;" [innerHTML]="btnRemarks"></div>
                </div>

                <ag-grid-angular #grid *ngIf=" rowModelType !=''"
                                 style="width: 100%; height: 100%" class="ag-theme-balham"
                                 enableColResize="true"
                                 [enableSorting]="enableSorting"
                                 [enableFilter]="enableFilter"
                                 [modules]="modules"
                                 [loadingOverlayComponent]="loadingOverlayComponent"
                                 [suppressNoRowsOverlay]="true"
                                 [rowData]="rowData"
                                 [gridOptions]="gridOptions"
                                 [rowModelType]="rowModelType"
                                 [columnDefs]="columnDefs"
                                 [pinnedBottomRowData]="pinnedBottomRowData"
                                 [frameworkComponents]="frameworkComponent"
                                 [allowContextMenuWithControlKey]="false"
                                 [getContextMenuItems]="getContextMenuItems"
                                 [sideBar]="sideBar"
                                 [context]="ctx"
                                 (cellClicked)="setCurrIndex($event)"
                                 [rowClassRules]="rowClassRules"
                                 (gridReady)="onGridReady($event)"
                                 (selectionChanged)="onSelectionChanged()"
                                 [suppressRowClickSelection]="suppressRowClickSelection"
                                 [rowSelection]="rowSelection"
                                 [masterDetail]="isDetail"
                                 [animateRows]="isDetail"
                                 [isRowMaster]="isRowMaster"
                                 [detailRowHeight]="detailRowHeight"
                                 [detailCellRenderer]="detailCellRenderer"
                                 [enableCellTextSelection]="true"
                                 [detailCellRendererParams]="detailCellRendererParams">
                </ag-grid-angular>

                <div class="apes-grid-footer">
                  <div *ngIf="rowModelType=='clientSide'">
                    <apes-pagination [(apesPageIndex)]="pagination.currentPage" [apesTotal]="pagination.total"
                                     [apesSize]="'small'"
                                     [apesPageSize]="pagination.pageSize"
                                     (apesPageIndexChange)="onPageIndexChange()"
                                     [apesShowTotal]="totalTemplate"></apes-pagination>
                    <ng-template #totalTemplate let-total>
                      &nbsp;{{pagination.pageSize * (pagination.currentPage == 0 ? 1 : pagination.currentPage) - pagination.pageSize + 1}}
                      ~
                      {{pagination.pageSize * (pagination.currentPage == 0 ? 1 : pagination.currentPage)}}
                      - {{pagination.pageSize}}条/页 -
                      共 {{pagination.total}} 条
                    </ng-template>
                  </div>
                  <div *ngIf="rowModelType=='serverSide'">
                    已加载{{loadingTotal}}行，总行数{{pagination.total}}
                  </div>
                </div>

              </div>


            </ng-container>

            <!-- 列表 -->
            <ng-container *ngIf="searchShowType == 'list'">

              <div class="query-grid" style="overflow: auto;">
                <apes-layered class="apes-query-layered" [data]="listData" [options]="listOptions"></apes-layered>
              </div>

            </ng-container>

            <!-- iframe -->
            <ng-container *ngIf="searchShowType == 'iframe'">

              <div class="query-grid" style="overflow: auto;">
                <ng-container *ngIf="iframeLoading">
                  <div style="text-align: center;">
                    <apes-empty></apes-empty>
                  </div>
                </ng-container>
                <ng-container *ngIf="!iframeLoading">
                  <apes-iframe [url]="iframeShowUrl" style="user-select: none;"></apes-iframe>
                </ng-container>
              </div>

            </ng-container>

          </apes-card>
        </div>
      </div>

    </div>
  </apes-container>
</div>

